微数据(HTML5 microdata) 是一种在网页中提供附加语义的标准化方式。
微数据允许我们定义自定义元素以及在网页中嵌入自定义属性。从较高的角度而言,微数组由一组名-值对组成。
这个分组被称作条目,每个名-值对就是一个属性。条目和属性使用普通元素表示。
示例用 itemscope 属性创建一个条目。给条目添加一个属性,itemprop 属性用于条目的后代。
这里有两个条目,其中每个条目都有一个 “name” 属性:
1 | <div itemscope> |
属性值通常是字符串,但是它可以是下列数据类型。
全局属性
微数据引入了五个全局属性,这些属性适用于在任意元素以及为数据提供上下文机制。
属性描述
itemscope用于创建一个条目。itemscope 属性是一个布尔值属性,说明页面上有微数据以及它从哪里开始。
itemtype这个属性是一个有效的 URL,用于定义条目以及为属性提供上下文。
itemid这个属性是条目的全局标识符。
itemprop这个属性为条目定义属性。
itemref这个属性提供了一个附加元素列表来抓取条目的名-值对。
属性数据类型
属性通常有一个正如上面的例子中提到的字符串值,但是它们的值也可以是 URLs。下面的例子中有一个 “image” 属性,它的值是一个 URL:
1 | <div itemscope> <img itemprop="image" src="tp-logo.gif" alt="TutorialsPoint"></div> |
属性的值也可以是日期,时间或者日期和时间。下面是一个使用 time 元素和 datetime 属性的实现。
1 | <div itemscope>My birthday is:<time itemprop="birthday" datetime="1971-05-08"> Aug 5th 1971</time></div> |
属性本身也可以是一组名-值对,通过在元素上放置 itemscope 属性来声明属性。
微数据 API 支持
如果浏览器支持 HTML5 微数据 API,那么全局 document 对象上就会有一个 getItems() 函数。如果浏览器不支持微数据,getItems() 函数就会是 undefined。
1 | function supports_microdata_api() { return !!document.getItems;} |
Modernizr 还不支持微数据 API 检测,因此我们需要使用像上面一样列出的函数来检测。
HTML5 微数据标准包含 HTML 标记(主要用于搜索引擎)和一系列 DOM 函数(主要用于浏览器)。
我们可以在网页中引入微数据标记,不理解微数据属性的搜索引擎将会忽略它们。但是,如果需要通过 DOM 访问或者操作微数据,我们还需要检查浏览器是否支持微数据 DOM API。
定义微数据词汇表
要定义一个微数据词汇表我们需要一个只想有效网页的命名空间 URL。例如 http://data-vocabulary.org/Person
可以用作带下列命名属性的个人微数据词汇表的命名空间。
name - 人名,简单的字符串值。
Photo - 指向人物照片的 URL。URL - 属于个人的网站。
下面是一个使用个人微数据相关属性的例子:
1 | <section itemscope itemtype="http://www.example.com/Person"> |
我们使用Live Microdata执行上面的HTML代码,会得到下面的JSON数据:
典型DEMO:
QQ自动识别,将下面这段代码加入到网站header里面
1 | <meta name="description" itemprop="description" content="我们坚持以自主研发、不断创新为发展动力,专注为企事业单位提供从移动应用开发、网站建设,到数据收集分析与云计算等的网络服务,以及互联网营销解决方案,形成了针对政府、企业、媒体等不同行业、不同规模、不同应用的系列产品和针对性解决方案。"> |
在QQ聊天会话中去试试吧~